{% extends 'base.html' %}




{% block content %}
<div class="container">
<!--    <div class="panel panel-default">-->
<!--        <div class="panel-heading">折线图</div>-->
<!--        <div class="panel-body">-->
<!--        兔兔兔兔-->
<!--        </div>-->
<!--    </div>-->

    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">柱状图</div>
                <div class="panel-body">
                    <div id="m2" style="width: 600px;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">饼图</div>
                <div class="panel-body">
                    <div id="m3" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default" >
        <div class="panel-heading" class="td1">
            最近5秒内CPU利用率
            <button >刷新 </button>
        </div>
        <div class="panel-body" id="but1" >
            <div id="m4" class="test" style="width: 100%;height:400px;"></div>
        </div>
    </div>
</div>

{% endblock %}


{% block js %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script type="text/javascript">

        $(function (){
            initBar();
            initPie();
            initK();
            /**
            * 初始化柱状图
            */
        })

        function initBar() {
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('m2'));

              // 指定图表的配置项和数据
              var option = {
                    title: {
                        text: 'ECharts 入门示例'
                        },
                    tooltip: {},
                    legend: {
                        data: []
                        },
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: []
                    };

              $.ajax({
                    url:"/data/bar",
                    type:"get",
                    dataType:"JSON",
                    success:function (res) {
                        // 将后台返回的数据更新到option中
                        if(res.status){
                            option.legend.data = res.data.legend;
                            option.xAxis.data = res.data.x_axis;
                            option.series = res.data.series_list;

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        }
                    }
                })
        }


        function initPie() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m3'));

            var option = {
              title: {                     <!--定义是都显示-->
                text: '部门预算占比',
                subtext: '北京办公区',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                bottom:0
              },
              series: [
                {
                  name: '预算',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    { value: 1048, name: 'IT部门' },
                    { value: 735, name: '运营' },
                    { value: 580, name: '新媒体' },
                    { value: 484, name: '行政' },
                    { value: 300, name: '销售' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

            $.ajax({
                url:"/data/pie",
                type:"get",
                dataType:"JSON",
                success:function(res){
                   if (res.status){
                    option.series[0].data = res.data;
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                   }

                }
            })
        }


        function initK(){
            var myChart = echarts.init(document.getElementById('m4'));
            var option = {
                tooltip: {},
                legend: {
                data: []
                },
                xAxis: [
                    {
                    name: '时间',
                    type: 'category',
                    data: [],
                    }
                ],
                yAxis: {
                    name: '利用率(单位%)',
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                series:[]
        };
        $("#but1").click(function() {
            $(".td1").html("刷新了第一行");
            });
        $.ajax({
                        url:"/data/kie",
                        type:"get",
                        dataType:"JSON",
                        success:function (res) {
			    //当服务端处理完成后，返回数据时，该函数自动调用
                            //将后台返回的数据更新到option中
                            if(res.status){
                                option.legend.data = res.data.legend;
                                option.xAxis[0].data = res.data.x_axis;
                                option.series = res.data.series_list;
                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                                }
                        }
                    })  
                

    }



</script>
{% endblock %}


